<template>
  <div class="player">
    <div class="container">

      <span class="exit" @click="exit"><img src="../assets/back.svg"></span>

      <div class="music-bg">
        <ul class="miusicFa">
          <li class="m1"></li>
          <li class="m2"></li>
          <li class="m3"></li>
          <li class="m4"></li>
          <li class="m5"></li>
          <li class="m6"></li>
          <li class="m7"></li>
          <li class="m8"></li>
          <li class="m8"></li>
          <li class="m7"></li>
          <li class="m6"></li>
          <li class="m5"></li>
          <li class="m4"></li>
          <li class="m3"></li>
          <li class="m2"></li>
          <li class="m1"></li>
        </ul>
      </div>

      <div class="midBanner">

        <div class="banner"></div>

        <div class="song-img">
          <div class="water-bg">
            <div class="water-box"></div>
            <div class="water-null" :style="{ top: waterTop}"></div>
          </div>
          <img :src="imgUrl">
        </div>

      </div>

      <div class="context" ref="context">
        <div class="lyr-box" ref="lyrBox">
          <span
          v-for="(item, index) of lyrObj.content"
          :key="index"
          :class="['lyr-item', lyrIndex == index ? 'isCurLyr' : '']"
          :ref="`lyrItem${index}`">{{item}}</span>
        </div>
      </div>

      <div class="control"></div>

    </div>
  </div>
</template>

<script>
  // import lyrics from "../utils/lyrics";
  import dealLyr from "../utils/dealLyrcics";
  export default {
    name: "MusicPlayer",
    data(){
      return {
        lyrObj: {},
        lyrIndex: 0,
        cssIndex: 0
      };
    },
    computed: {
      song(){
        return this.$store.getters.song;
      },
      imgUrl(){
        if(JSON.stringify(this.$store.getters.song) == '{}'){
          return '../assets/song_bg.svg';
        }
        return this.$store.getters.song.imgUrl;
      },
      waterTop(){
        return (this.$store.getters.songControl.currProgress-120).toFixed(2) + '%';
      },
      songControl(){
        return this.$store.getters.songControl;
      },
      visible(){
        return this.$store.getters.playerVisible;
      }
    },
    watch: {
      song: {
        deep: true,
        handler(){
          this.getLyr();
        }
      },
      songControl: {
        deep: true,
        handler(val){
          if(typeof(this.lyrObj.time) === 'undefined'){return;}
          // 遍历一遍，怕有的歌词时间点间隔太小监听的timeupdate会错过导致出错，所以便利来设定此时的index下标
          this.lyrObj.time.forEach((item, index) => {
            if(item <= val.curTime){
              this.lyrIndex = index;
            }
          });
          // console.log(val.curTime);
          if(this.lyrObj.time[this.lyrIndex] >= val.curTime-0.2 && this.lyrObj.time[this.lyrIndex] <= val.curTime+0.2){
            // console.log('下一条歌词来了');
            this.lyrRun();
          }
        }
      }
    },
    methods:{
      /** 获取歌词 */
      getLyr(){
        console.log(this.song);
        this.lyrObj = {};
        this.lyrIndex = 0;
        this.$refs.lyrBox.style.cssText = "transform: translateY(0)";
        this.$axios.get(`/api/lyric?id=${this.song.id}`)
        .then(res => {
          console.log(res);
          let data = res.data.lrc.lyric;
          this.initLyr(data);
        })
        .catch(err => {console.log(err)});
      },
      /** 解析歌词 */
      initLyr(data){
        this.lyrObj = dealLyr.parse(data);
        console.log(document.getElementsByClassName("context")[0].offsetHeight);
      },
      /** 歌词滚动 */
      lyrRun(){
        let boxH = this.$refs.context.offsetHeight;
        let content = this.$refs.lyrBox;
        let height = content.offsetHeight;
        // console.log('||');
        if(height == 0){return;}
        this.cssIndex = this.lyrIndex;
        //向上滚动：
        let curTop = this.$refs[`lyrItem${this.lyrIndex}`][0].offsetTop - (boxH/2);
        content.style.cssText = `transform: translateY(${-curTop}px)`;
        
      },
      /** 退出播放器页面 */
      exit(){
        this.$store.dispatch("setPlayerVisible", false);
      }
    }
  }
</script>

<style scoped lang="scss">
.player{
  width: 100vw;
  height: 100vh;
  color: white;
  background-image: $dark-gradient-backgroud;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 666;
  .container{
    width: 100vw;
    height: 100vh;
    display: flex;
		flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;

    .exit{
      width: 4vw;
      height: 4vw;
      display: flex;
      position: absolute;
      top: 2vh;
      left: 4vw;
      img{
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
      }
    }

    .music-bg{
        width: 100vw;
        height: 80vw;
        max-height: 400px;
        position: absolute;
        top: 8vh;
        left: 0;
        .miusicFa {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          width: 4vw;
          height: 40vw;
          max-height: 200px;
          float: left;
          background: lightgreen;
        }
        .m1 {
          background: lightblue;
          -webkit-animation: .8s .1s living linear infinite backwards normal;
          animation: .8s .1s living linear infinite backwards normal;
        }
        .m2 {
          background: lightgreen;
          -webkit-animation: .8s .3s living linear infinite backwards normal;
          animation: .8s .3s living linear infinite backwards normal;
        }

        .m3 {
          background: lightcoral;
          -webkit-animation: .8s .6s living linear infinite backwards normal;
          animation: .8s .6s living linear infinite backwards normal;
        }

        .m4 {
          background: lightyellow;
          -webkit-animation: .8s 1s living linear infinite backwards normal;
          animation: .8s 1s living linear infinite backwards normal;
        }

        .m5 {
          background: lightpink;
          -webkit-animation: .8s 1.5s living linear infinite backwards normal;
          animation: .8s 1.5s living linear infinite backwards normal;
        }
        .m6 {
          background: lightgrey;
          -webkit-animation: .8s 2.1s living linear infinite backwards normal;
          animation: .8s 2.1s living linear infinite backwards normal;
        }
        .m7 {
          background: lightgreen;
          -webkit-animation: .8s 2.8s living linear infinite backwards normal;
          animation: .8s 2.8s living linear infinite backwards normal;
        }
        .m8 {
          background: orange;
          -webkit-animation: .8s 3.7s living linear infinite backwards normal;
          animation: .8s 3.7s living linear infinite backwards normal;
        }
        @-webkit-keyframes living {
          0% {
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
          // -webkit-transform-origin: 0 21px;
          // transform-origin: 0 21px
          }
          50% {
          -webkit-transform: scaleY(.3);
          transform: scaleY(.3);
          // -webkit-transform-origin: 0 21px;
          // transform-origin: 0 21px
          }
          100% {
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
          // -webkit-transform-origin: 0 21px;
          // transform-origin: 0 21px
          }
        }
        @keyframes living {
          0% {
          -webkit-transform: scaleY(1);
          -ms-transform: scaleY(1);
          transform: scaleY(1);
          // -webkit-transform-origin: 0 21px;
          // -ms-transform-origin: 0 21px;
          // transform-origin: 0 21px
          }

          50% {
          -webkit-transform: scaleY(.3);
          -ms-transform: scaleY(.3);
          transform: scaleY(.3);
          // -webkit-transform-origin: 0 21px;
          // -ms-transform-origin: 0 21px;
          // transform-origin: 0 21px
          }
          100% {
            -webkit-transform: scaleY(1);
            -ms-transform: scaleY(1);
            transform: scaleY(1);
            // -webkit-transform-origin: 0 21px;
            // -ms-transform-origin: 0 21px;
            // transform-origin: 0 21px
          }
        }
      }
    }

    .midBanner{
      margin-top: 8vh;
      width: 70vw;
      max-width: 350px;
      height: 70vw;
      max-height: 350px;
      border-radius: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
      z-index: 23;
      .song-img{
        width: 60vw;
        max-width: 300px;
        height: 60vw;
        max-height: 300px;
        border-radius: 20%;
        overflow: hidden;
        position: relative;
        z-index: 233;
        img{
          width: 100%;
          height: 100%;
          position: absolute;
          opacity: 0.8;
        }
        .water-bg{
          width: 100%;
          height: 100%;
          border-radius: 20%;
          overflow: hidden;
          position: absolute;
          top: 0;
          left: 0;
          .water-box{
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
          }
          .water-null{
            content: "";
            width: 130%;
            height: 120%;
            border-radius: 40%;
            background:rgba(255, 255, 255, 0.8);
            position: absolute;
            top: -120%;
            left: 50%;
            transform: translateX(-50%);
            animation: water-rotate 4s linear infinite;
          }
          @keyframes water-rotate {
            0%{
              transform: translateX(-50%) rotate(0);
            }
            100%{
              transform: translateX(-50%) rotate(360deg);
            }
          }
        }
      }
      .banner{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 500px;
        height: 90vw;
        max-height: 500px;
        background-image: linear-gradient(
            0deg,
            rgb(47, 102, 255),
            rgb(153, 64, 255) 30%,
            rgb(238, 55, 255) 60%,
            rgb(255, 0, 76) 100%
        );
        animation: rotateBaner 6s linear infinite;
      }
    }
    @keyframes rotateBaner {
      0%{
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100%{
        transform: translate(-50%, -50%) rotate(360deg);
      }
    } 

    .context{
      margin-top: 20px;
      width: 100%;
      height: 100%;
      flex: 1;
      font-size: 0.28rem;
      position: relative;
      overflow: auto;
      .lyr-box{
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 0;
        left: 10%;
        transition: transform 0.4s;
        .lyr-item{
          line-height: 30px;
          text-align: center;
          opacity: 0.5;
        }
        .isCurLyr{
          color: lightyellow;
          transform: scale(1.2);
          opacity: 1;
        }
      }
    }

    .control{
      width: 100%;
      height: 80px;
    }



  }
}
</style>